<template>
  <div v-if="options">
    <div class="title">
      <h4>{{ options.title }}</h4>
      <p>{{ options.descriptions }}</p>
    </div>
    <div class="dataList" v-if="list">
      <el-table :data="list">
        <template v-for="(value, index) of options.items" :key="index">
          <el-table-column
            v-if="!value.display"
            :prop="value.prop"
            :label="value.label"
          >
            <template #default="{ row }">
              <div class="row">
                <template v-if="Array.isArray(row[`${value.prop}`])">
                  <el-tag
                    v-for="val of row[`${value.prop}`]"
                    :key="val[`${value.keyName}`]"
                    >{{ val[`${value.keyName}`] }}</el-tag
                  >
                </template>
                <template v-else-if="typeof row[`${value.prop}`] == 'object'">
                  {{ row[`${value.prop}`][`${value.sub}`] }}
                </template>
                <template v-else>
                  {{ row[`${value.prop}`] }}
                </template>
              </div>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="创建时间">
          <template #default="{ row }">
            {{ formatDate(row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button @click="updateOne(row._id)" type="text" size="small"
              >修改</el-button
            >
            <el-button @click="deleteOne(row._id)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, watchEffect } from "vue";
import {
  ElTag,
  ElMessage,
  ElPagination,
  ElTable,
  ElTableColumn,
  ElButton,
} from "element-plus";
import dayjs from "dayjs";

import { http } from "../../http";
import { router } from "../../router";
import { useOptions } from "../../hooks/useOptions.hook";
import { useList } from "../../hooks/useList.hook";

export default defineComponent({
  name: "List",
  components: {
    ElTag,
    ElPagination,
    ElTable,
    ElTableColumn,
    ElButton,
  },
  props: {
    resource: String,
    status: String,
  },
  setup(props) {
    const { resource } = toRefs(props);
    let { options, getOptions } = useOptions(resource?.value);
    const { list, getList, page, handleSizeChange, handleCurrentChange } =
      useList(resource?.value);

    watchEffect(() => {
      getOptions();
      getList(props.status);
    });

    function updateOne(id: string) {
      router.push(`/${resource?.value}/edit/${id}`);
    }

    async function deleteOne(id: string) {
      try {
        await http.delete(`/${resource?.value}/${id}`);
        ElMessage.success("删除成功");
        await getList();
      } catch (e) {
        ElMessage.error("删除失败");
      }
    }

    function formatDate(data: string) {
      return dayjs(data).format("YYYY/MM/DD");
    }

    return {
      options,
      getOptions,
      list,
      getList,
      updateOne,
      deleteOne,
      page,
      handleSizeChange,
      handleCurrentChange,
      formatDate,
    };
  },
});
</script>

<style lang="scss">
.main {
  .title {
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);

    > h4 {
      margin-top: 0px;
      margin-bottom: 10px;
    }
    > p {
      margin: 0px;
    }
  }

  .dataList {
    margin: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);

    .row {
      overflow: hidden;
      text-overflow: ellipsis;
      /* white-space: nowrap; */
      display: flex;
      align-items: center;
      height: 50px;
    }

    .page {
      margin: 0.5em 0;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
